<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="container">
        <div class="sub-list">
          <div class="item">
            <h3>分类名字</h3>
            <ul>
              <li>
                <a href="javascript:;">
                  <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
                  <p>巧克力</p>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
                  <p>巧克力</p>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
                  <p>巧克力</p>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    <script src="./js/axios.min.js"></script>
    <script>
  /**
     * 目标：把所有商品分类“同时”渲染到页面上
     *  1. 获取所有一级分类数据
     *  2. 遍历id，创建获取二级分类请求
     *  3. 合并所有二级分类Promise对象
     *  4. 等待同时成功后，渲染页面
    */
   axios({
    url:'http://hmajax.itheima.net/api/category/top'
   })
   .then(res=>{
    // console.log(res);  
   const tasks=res.data.data.map(item=>{
    return axios({
        url:'http://hmajax.itheima.net/api/category/sub',
        params:{
            id:item.id
        }
    })
   })
   Promise.all(tasks)
.then(result=>{
    document.querySelector('.sub-list').innerHTML=result.map(item=>{
        // first变量获取的是返回结果中真正的数据
        const first=item.data.data
        console.log(first);
        return `<div class="item">
            <h3>${first.name}</h3>
            <ul>
                ${
                    // first.children是二级分类数组
                    // 下面这段代码是将二级分类数组转为多个li字符串
                    first.children.map(subItem=>`<li>
                <a href="javascript:;">
                  <img src="${subItem.picture}" />
                  <p>${subItem.name}</p>
                </a>
              </li>`).join('')
            }
            </ul>
            </div>`
    }).join('')
})
.catch(err=>{
    console.log(err.response);
})
})
//    console.log(tasks);
// 现在需要得到9个promise任务的结果，我们可以使用promise.all来处理

    </script>
</body>
</html>